<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="40px" label-position="right">
                    <el-row :gutter="41">
                       <el-col :span="7">
                            <el-form-item label="省份" prop="provinceId">
                                <province v-model="query.provinceId" :name.sync="query.provinceName"></province>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="市区" prop="cityId">
                                <city v-model="query.cityId" :province="query.provinceId" :name.sync="query.cityName"></city>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="区县" prop="areaId">
                                <region v-model="query.areaId" :city="query.cityId" :name.sync="query.areaName"></region>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="onSubmit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="table" >
                <div class="table-title">
                    <exportExcel :jsonStr='jsonStr'></exportExcel>
                </div> 
                <el-table :data="tableData" border v-loading="loading" style="width: 100%" :default-sort = "{prop: 'login', order: 'descending'}" @sort-change='sortChange'>
                    <el-table-column label="总积分" align="center" sortable='custom' prop="s_point">
                        <template scope="scope">
                            <span>{{scope.row.s_point}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="区域" align="center">
                        <template scope="scope">
                            <span>{{scope.row.s_area_name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="城市" align="center">
                        <template scope="scope">
                            <span>{{scope.row.s_city_name}}</span>
                        </template>
                    </el-table-column>
    
                    <el-table-column label="省份" align="center">
                        <template scope="scope">
                            <span>{{scope.row.s_province_name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="日期" align="center">
                        <template scope="scope">
                            <span>{{scope.row.report_date}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageQuery.total"
                        :current-page.sync="pageQuery.currentpage"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import exportExcel from 'components/ExportExcel';  
    import { queryTable } from 'api/common';
    import { mapState, mapActions } from 'vuex';
    export default{
        name: 'integralDetail',
        components: {province, city, region, echartsLayout, exportExcel},
        data() {
            return {
                loading: false,
                formState: false,
                dataListState: true,
                eCharts1State: true,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                query: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    provinceName: '',
                    cityName: '',
                    areaName: '',
                    sortBy: 's_point',
                    flag: true
                },
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                jsonStr: null
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        created() {
            this.queryData();
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            // getProvinceName(provinceName) {
            //     this.query.provinceName = provinceName;
            // },
            // getCityName(cityName) {
            //     this.query.cityName = cityName;
            // },
            // getAreaName(areaName) {
            //     this.query.areaName = areaName;
            // },
            queryData() {
             
                let query_id = 78;
                let show_list = false;
                let real_time = false;
                let type = 'event';
                let query = {
                    'order_field': this.query.sortBy,
                    'order_desc': this.query.flag,
                    'province': this.query.provinceName,
                    'city': this.query.cityName,
                    'area': this.query.areaName
                }
                this.jsonStr = {
                    'query_id': 78, 
                    'show_list': false, 
                    'real_time': false,
                    'type': 'event',
                    'file_name': '积分明细统计', 
                    'field_names': [['总积分', 's_point'], ['区域', 's_area_name'], ['城市', 's_city_name'], ['省份', 's_province_name'], ['日期', 'report_date']],
                    query
                };
                console.log(this.jsonStr, 'askdoaskdoaosdko');
                this.loading = true;
                queryTable(query, query_id, this.pageQuery.currentpage, this.config.pageSize, show_list, type, real_time).then(response => {
                    this.loading = false;
                    this.tableData = [];
                    if (response.data.content) {
                        this.tableData = response.data.content.rows;
                        this.pageQuery.total = response.data.content.total || response.data.content.total_rows;
                    }
                }).catch(() => {
                    this.tableData = [];
                    this.loading = false;
                });
            },
            onSubmit() {
                this.pageQuery.currentpage = 1;
                this.queryData();
            },
            sortChange({ column, prop, order }) {
                this.query.sortBy = prop?prop:'s_point';
                this.query.flag = order=='ascending'?false:true;
                this.queryData();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
    }
</style>                     